<template class="page-bg">
  <div >
    <div class="weui-cells form weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd ">
          <input v-if="!tag" class="weui-input" required placeholder="请准确输入您的姓名" type="name" v-model="item.name">
          <input v-if="tag" class="weui-input" type="name" v-model="name" disabled>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入您的手机号" type="tel" v-model="item.telephone" v-if="!tag">
          <input class="weui-input" type="tel" v-model="telephone" v-if="tag" disabled>
        </div>
      </div>
    </div>

    <div class="weui-btn-area" @click = "submit();" v-if="!tag">
      <a href="javascript:;" class="weui-btn weui-btn_primary">确定</a>
    </div>
    <div class="weui-btn-area" @click = "logOff = true" v-if="tag">
      <a href="javascript:;" class="weui-btn weui-btn_default">注销</a>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="logOff"
      width="70%">
      <span>注销后将不具备任何权限，确定注销账号吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="logOff = false">取 消</el-button>
        <el-button type="primary" @click="off">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios'
import wx from 'weixin-js-sdk'
export default {
  name: 'BindForm',
  data () {
    return {
      name: Cookies.get('username'),
      telephone: Cookies.get('telephone'),
      logOff: false,
      tag: false,
      item: {
        name: '',
        telephone: '',
        code: this.$global.getUrlKey('code')
      }
    }
  },
  methods: {
    submit () {
      if (this.item.name === '' || this.item.telephone === '') {
        this.$notify.warning({
          title: '请输入姓名和电话!'
        })
        return
      }
      this.$axios({
        method: 'put',
        url: this.url + '/user/bind',
        data: JSON.stringify(this.item)
      }).then((user) => {
        if (user.status === 200) {
          alert('绑定成功')
          const data = user.data
          Cookies.set('username', data.name)
          Cookies.set('level', data.level)
          Cookies.set('id', data.id)
          Cookies.set('telephone', this.item.telephone)
          localStorage.setItem('level', data.level)
          localStorage.setItem('id', data.id)
          localStorage.setItem('name', data.name)
          localStorage.setItem('telephone', this.item.telephone)
          this.$router.push('/project')
        } else {
          wx.closeWindow()
          alert('绑定失败！请重新打开界面尝试')
        }
      }).catch(() => {
        wx.closeWindow()
        alert('绑定失败！请重新打开界面尝试')
        // alert(err)
      })
    },
    getInfo () {
      axios.get(this.url + '/user/info/' + Cookies.get('id'))
        .then(this.getInfoSucc)
    },
    getInfoSucc (res) {
      if (res.status !== 200) alert(res)
      else if (res) {
        res = res.data
        this.item.name = res.name
        this.item.telephone = res.telephone
      }
    },
    off () {
      this.$axios.delete(this.url + '/user/id/' + Cookies.get('id'))
      Cookies.remove('username')
      Cookies.remove('level')
      Cookies.remove('id')
      Cookies.remove('telephone')
      localStorage.removeItem('level')
      localStorage.removeItem('id')
      localStorage.removeItem('username')
      localStorage.removeItem('telephone')
      this.tag = false
      this.logOff = false
      alert('您已成功注销!')
      this.item = []
      wx.closeWindow()
    }
  },
  created () {
    if (Cookies.get('id')) {
      this.getInfo()
      this.tag = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .form
   margin-top 0
  .btn
    background  #C0BFC4
  .selectColor
    color: #d1d1d1
  .selectStyle
    height: 50px
    line-height: 50px
    width: 100%
  .leaderChoose
    margin-top -0.08rem
</style>
